import React from "react";
import {Badge, Button, Card, Col, Divider, Icon, message, Row, Spin} from "antd";
import {connect} from "dva";
import router from 'umi/router';

@connect(({commonModel}) => ({
    commonModel
}))
class index extends React.Component {

    state = {
        //-- 页面数据
        dataSource: {},
        //-- 加载层
        loading: false,
    }

    componentDidMount() {
        this.findPageData();
    }

    findPageData = () => {
        const thisCtx = this;
        const {dispatch} = this.props;
        this.setState({loading: true});
        dispatch({
            type: 'commonModel/initData',
            callback: function (data) {
                thisCtx.setState({loading: false});
                if (data && data.success) {
                    console.log(data);
                    thisCtx.setState({
                        dataSource: data.datas
                    });
                } else {
                    message.error('首页数据加载失败');
                }
            }
        });
    }

    handlerRoter = (type) => {
        router.push(`/manage/${type}`);
    }

    render() {

        const {loading, dataSource} = this.state;

        const colLayout = {
            xs: 24,
            sm: 12,
            md: 12,
            lg: 12,
            xl: 12,
            style: {
                marginBottom: 24,
                padding: 10,
            },
        }
        const spareColLayout = {
            xs: 24,
            sm: 12,
            md: 12,
            lg: 12,
            xl: 2,
        }

        const cardLayout = {
            bodyStyle: {padding: '20px 24px 8px 24px'},
        }

        const cardStyle = {
            width: 'auto',
            fontSize: 20,
            color: 'white',
            height: 150,
            textAlign: 'center',
            display: "flex",
            alignItems: "center",
            justifyContent: "center"
        }
        const cardColor = {
            1: '#FF9966',
            2: '#1899FF',
            3: '#FF99CC',
            4: '#21BA63',
            5: '#CC99FF',
            6: '#CC9966',
        }

        const spanLayout = {
            display: "block",
            marginTop: '0.25rem',
            fontSize: '0.6rem',
            color: '#969696'
        }

        return (
            <Spin spinning={loading}>
                <div style={{width: 'auto', height: '100%'}}>
                    <Row>
                        <Col {...colLayout}>
                            <Card {...cardLayout} style={{backgroundColor: cardColor[1], ...cardStyle}}
                                  onClick={() => this.handlerRoter('account')}
                            >
                                <div>待审核注册</div>
                                <div style={{marginTop: 20}}>{dataSource.unAuditCount || 0}</div>
                            </Card>
                        </Col>
                        <Col {...colLayout}>
                            <Card {...cardLayout} style={{backgroundColor: cardColor[2], ...cardStyle}}
                                  onClick={() => this.handlerRoter('elevator')}
                            >
                                <div>待续保电梯</div>
                                <div style={{marginTop: 20}}>{dataSource.unBuyCount || 0}</div>
                            </Card>
                        </Col>
                        <Col {...colLayout}>
                            <Card {...cardLayout} style={{backgroundColor: cardColor[4], ...cardStyle}}
                                  onClick={() => this.handlerRoter('elevator')}
                            >
                                <div>电梯上传记录&nbsp;&nbsp;</div>
                                <div style={{marginTop: 20}}>{dataSource.elevatorCount || 0}台</div>
                            </Card>
                        </Col>
                        <Col {...colLayout}>
                            <Card {...cardLayout} style={{backgroundColor: cardColor[6], ...cardStyle}}
                                  onClick={() => this.handlerRoter('inquiry')}
                            >
                                <div>待处理报价</div>
                                <div style={{marginTop: 20}}>{dataSource.askCount || 0}台</div>
                            </Card>
                        </Col>
                    </Row>
                </div>
            </Spin>
        );
    }
}

export default index;
